@import "default";
@import "common";

#container {
    width: 100%;
    height: 100%;
    position: absolute;
    flex: 1;
    justify-content: center;
    background: @color-lighter;

    .carts {
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: @color-wrapper;
        position: relative;

        .tabs-date, .tabs-time {
            width: 100%;
            height: 50px;
            line-height: 50px;
            float: left;
            background: @color-std-white;
            border-bottom: 2px solid @color-border-wrapper;

            li {
                width: 25%;
                float: left;
                font-size: 11pt;
                text-align: center;
                cursor: pointer;

                &.active {
                    border-bottom: 2px solid @color-yellow;
                }
            }
        }

        .check {
            width: 100%;
            height: 50px;
            .position(absolute, auto, auto, 50px, 0);
            background: @color-std-white;

            .circle {
                width: 10%;
                height: 50px;
                .float-left();

                .active {
                    width: 18px;
                    height: 18px;
                    margin: 16px 0 0 25%;
                    .border-radius(50%);
                    border: 1px solid @color-border-wrapper;
                }
            }

            .con {
                width: 60%;
                height: 50px;
                .float-left();

                .amount, .trans {
                    width: 100%;
                    color: @color-normal;
                    .line-height(25px);

                    .item {
                        width: 70px;
                        font-size: @font-10pt;
                        font-weight: bold;
                        color: @color-dark;
                        .float-left()
                    }

                    .num {
                        width: 150px;
                        .line-height(25px);
                        color: @color-std-red;
                        font-weight: bold;
                        font-size: @font-11pt;
                        .float-left();
                    }
                }
            }

            .btn {
                width: 30%;
                .float-left();
                text-align: center;
                font-size: @font-12pt;
                color: @color-std-white;
                .line-height(50px);
                background: @color-normal;
                background: @color-yellow;
            }
        }
    }
}